<template>
    <div class="show-menu">
        <el-row class="tac">
            <el-col :span="24" class="tac-col">
                <el-menu
                    :default-active="handleActive"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    router
                    unique-opened
                    collapse-transition
                >
                    <el-submenu index="vue">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>Vue</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item 
                                v-for="(item, i) in menuData" 
                                :index="item[0]"
                                :key="i"
                                >
                                {{item[1]}}
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="vueCli">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>@Vue/Cli</span>
                        </template>
                        <el-menu-item index="vue-cli">@Vue/Cli</el-menu-item>
                    </el-submenu>
                    <el-submenu index="vuex">
                        <template slot="title">
                            <i class="el-icon-menu"></i>
                            <span>Vuex</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="vuex-img">Vuex图解</el-menu-item>
                            <el-menu-item index="vuex-use">VueX基本使用</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">导航四</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import menuData from '../datas/menuData';

export default {
    name: 'Vmenu',
    data() {
        return {
            menuData,
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },
    computed: {
        // 动态调整当前激活的选项
        handleActive: function() {
            return this.$route.path.replace('/', '');
        }
    }
}
</script>

<style lang="less" scoped>
.show-menu {
    width: 100%;
    height: 100%;

    .tac {
        width: 100%;
        height: 100%;

        .tac-col {
            height: 100%;

            .el-menu-vertical-demo {
                height: 100%;
            }
        }
    }
}
</style>